<script setup lang="ts">
import { BASE_ROUTER_URL } from "@/config/env";
import { Briefcase, House, InfoFilled, Monitor, OfficeBuilding, User } from "@element-plus/icons-vue";
import { ref } from 'vue';
import { RouterView } from "vue-router";
import { useCounterStore } from "./stores/counter";
import httpUtils from 'gtl-utils/utils/http-utils'
import { BIconAndroid2 } from "bootstrap-icons-vue";
const defaultPath = ref(document.location.pathname);
const centerDialogVisible = ref();
function cli() {
  console.log(useCounterStore)
  useCounterStore().resetScreen()
}
const logout = ()=>{
  httpUtils.request("/logout", { method: httpUtils.Method.GET,})
  window.location.href = BASE_ROUTER_URL;
  centerDialogVisible.value = false
}
</script>
<template>
  <div :hidden="useCounterStore().fullScreenValue">
    <el-menu  class="el-menu-demo" mode="horizontal" :router="true" :default-active="defaultPath"
      @contextmenu="(e: any) => { e.preventDefault() }">
      <el-menu-item :index="BASE_ROUTER_URL+'/'" :path="BASE_ROUTER_URL+'/'"><el-icon>
          <House />
        </el-icon>主页
      </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/vmbox'"><el-icon>
          <Monitor />
        </el-icon>虚拟机
      </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/android'"><el-icon>
        <BIconAndroid2 />
        </el-icon>安卓主机
    </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/user'"><el-icon>
          <User />
        </el-icon>用户
      </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/org'"><el-icon>
          <OfficeBuilding />
        </el-icon>组织
      </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/workflow'"><el-icon>
          <Briefcase />
        </el-icon>工作流
      </el-menu-item>

      <el-menu-item :index="BASE_ROUTER_URL+'/about'"><el-icon>
          <InfoFilled />
        </el-icon>关于
      </el-menu-item>

    </el-menu>


 

    <div id="user-item" @click="centerDialogVisible = true">
      <img id="user-icon" style=" background-image: url('/favicon.ico');" />
      <br />
      <span
        style="width: 100%;position: absolute; top: 43px; font-size: 13px; line-height: 13px;text-align: center;">测试账号</span>
    </div>

    <el-dialog v-model="centerDialogVisible" title="用户信息"  width="300" align-center style="text-align: center;">
      <div style="width: 100%; text-align: center;">
        <img id="user-icon" style=" background-image: url('/favicon.ico');" />
        <el-button style="display: inline-block; width: 100%;margin-left: 0px;margin-top: 8px;" @click="centerDialogVisible = false">修改用户信息</el-button>
        <el-button style="display: inline-block; width: 100%; margin-left: 0px;"  @click="logout" >退出登录</el-button>
      </div>
    </el-dialog>
  </div>
  <RouterView />
</template>

<style scoped>
#user-item {
  width: 75px;
  height: 59px;
  position: absolute;
  top: 0px;
  right: 0px;
  --el-menu-active-color: none;
  border-bottom: 2px;
}

#user-icon {
  margin-left: 20px;
  width: 35px;
  height: 35px;
  margin-top: 6px;
}
</style>
